<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*表单元素样式重置*/
        form {
            margin: 0; /*IE6下有magrin*/
        }

        input {
            margin: 0;
            padding: 0;
            outline: none;
            border: 1px solid #e4e9ed;
        }

        select {
            margin: 0;
            padding: 0;
            /*清除select默认样式*/
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            border: solid 1px #e4e9ed;
            /*ie下,原默认的箭头样式还是会显示，所以这里把自定义的样式给去除了*/
            background: #fff \9;
            color: #858688;
            outline: none;
        }

        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        select::-ms-expand {
            display: none;
        }

        .default {
            width: 330px;
            height: 34px;
            margin-left: 20px;
        }

        #right-align {
            width: 425px;
            text-align: right;
            float: left;
        }

        #sex-align {
            width: 425px;
            text-align: left;
            margin-left: 35px;
            color: #858688;
        }

        #sex_man {
            margin-left: 21px;
        }

        #education-align {
            width: 425px;
            text-align: left;
            margin-left: 4px;
        }

        #education {
            margin-left: 21px;
        }

        .select-def {
            width: 160px;
            height: 34px;
            /*自定义箭头的样式，记得背景一定要加 白色或其他*/
            background: url("img/select.png") no-repeat scroll 145px center #fff;
        }

        #education_yeas {
            margin-left: 5px;
        }

        .select-location-def {
            width: 330px;
            height: 34px;
            /*自定义箭头的样式，记得背景一定要加 白色或其他*/
            background: url("img/select.png") no-repeat scroll 145px center #fff;
            margin-left: 20px;
        }

        #location-alige {
            text-align: left;
            margin-left: 20px;
        }

        #submlit {
            width: 140px;
            height: 36px;
            background: #e15771;
        }

        #submlit-left {
            text-align: left;
            margin-left: 90px;
        }

        .success {
            font: 14px/36px "微软雅黑";
            color: #7bd78c;
            /*添加定位*/
            position: absolute;
            left: 10px;
            top: 17px;
        }

        .error {
            font: 14px/36px "微软雅黑";
            color: #e05773;
            /*添加定位*/
            /*position: absolute;*/
            /*left: 10px;*/
            /*!*top: 145px;*!*/
        }

        #message {
            float: left;
            position: relative;
        }

        /*由于after伪类的内容默认是一个行内元素，行内元素的clear无效，所以这样写*/
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

    </style>
</head>
<body>
<div id="right-align">
    <form action="">
        <p>
            <label for="usernmae">姓名</label>
            <input class="default" type="text" id="usernmae" name="username" value="">
        </p>

        <div id="sex-align">
            <span style="color:#000000">性别</span>
            <input id="sex_man" type="radio" name="sex" value="man">
            <label for="sex_man">男</label>
            <input id="sex_woman" type="radio" name="sex" value="woman">
            <label for="sex_woman">女</label>
        </div>
        <p>
            <label for="number">电话</label>
            <input class="default" id="number" type="text" name="number" value="">
        </p>
        <p>
            <label for="email">邮箱</label>
            <input class="default" id="email" type="text" name="email" value="">
        </p>
        <p>
            <label for="career">求职意向</label>
            <input class="default" id="career" type="text" name="career" value="web前端">
        </p>
        <div id="education-align">
            <label for="education">最高学历</label>
            <select class="select-def" name="education" id="education">
                <option value="1">高中</option>
                <option value="2" selected="selected">大专</option>
                <option value="3">本科</option>
                <option value="4">研究生</option>
                <option value="5">博士</option>
            </select>
            <select class="select-def" name="education" id="education_yeas">
                <option value="2010">2010</option>
                <option value="2011" selected="selected">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
            </select>
        </div>
        <p>
            <label for="working_yeas">工作年限</label>
            <input class="default" id="working_yeas" type="text" name="working_yeas" value="1">
        </p>
        <div id="location-alige">
            <label for="location">所在地</label>
            <select class="select-location-def" name="location" id="location">
                <option value="beijin" selected="selected">北京</option>
                <option value="tianjin">天津</option>
            </select>
        </div>
        <p id="submlit-left">
            <input id="submlit" type="submit" value="提交">
        </p>
    </form>
</div>
<!--TODO input表单中提示语布局的问题-->
<div id="message" class="clearfix">
    <p class="success">填写正确</p>
    <p class="error">姓名不能为空</p>
</div>
</body>
</html>